<template>
    <div class="statistic-list">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="统计方式">
                <el-select clearable v-model="formInline.dimension" placeholder="请选择统计方式">
                    <el-option v-for="(item, index) in dimensionList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择景区">
                <el-select clearable v-model="formInline.scenicId" placeholder="请选择景区">
                    <el-option v-for="(item, index) in scenicList"
                               :key="item.id"
                               :label="item.scenicName"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择产品">
                <el-select clearable v-model="formInline.productId" placeholder="请选择产品">
                    <el-option v-for="(item, index) in productList"
                               :key="item.id"
                               :label="item.productName"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="验证时间" class="verify-time">
                <el-row>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.startDate"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="00:00:00">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1" class="time-span">~</el-col>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-if="reRenderflag"
                                v-model="formInline.endDate"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="23:59:59">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border highlight-current-row size="small">
            <el-table-column label="统计类型" align="center" prop="dimensionValue"></el-table-column>
            <el-table-column label="验证次数" align="center" prop="entryCount"></el-table-column>
            <el-table-column label="验证会员数" align="center" prop="ecardCount"></el-table-column>
            <el-table-column label="积分" align="center" prop="integralNum"></el-table-column>
        </el-table>
        <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="20"
                :current-page="currentPage"
                @current-change="handleChangePage">
        </el-pagination>
    </div>
</template>
<script>
	import { getVerifyStatisticsList, getStatisticsDimensionList, getScenicList, getProductList } from '@/api/verifyStatistics'
	import { formatDate } from '@/utils/utils'
	const startTime = new Date()
	startTime.setTime(startTime.getTime() - 3600 * 1000 * 24 * 7)
//	let limitTime = null
	export default {
		data() {
			return {
				list: [],
				listLoading: false,
				formInline: {
					scenicId: '',
					productId: '',
					dimension: '1',
					startDate: startTime,
					endDate: new Date()
				},
				dimensionList: [],
				scenicList: [],
				productList: [],
				total: null,
				currentPage: 1,
				pageSize: 20,
				reRenderflag: true
//				pickerOptions: {
//					disabledDate(time) {
//						var day = time.getTime()
//						return !(day <= limitTime)
//					}
//				}
			}
		},
		created() {
			this.getStatisticsDimensionList()
            this.getScenicList()
            this.getProductList()
			this.fetchData()
		},
		methods: {
//			changeStartTime() {
//				limitTime = new Date(this.formInline.startDate).getTime() + 3600 * 1000 * 24 * 365
//				this.reRenderflag = false
//				this.$nextTick(() => {
//					this.reRenderflag = true
//				})
//			},
			fetchData() {
				this.listLoading = false
				let formInline = this.formInline
				let params = {
					startDate: formatDate(formInline.startDate, true),
					endDate: formatDate(formInline.endDate, true),
					dimension: formInline.dimension,
					scenicId: formInline.scenicId,
					productId: formInline.productId,
					pageNumber: this.currentPage,
					pageSize: this.pageSize
				}
				getVerifyStatisticsList(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.list = data.body.list
						this.total = data.body.total
					}
				})
			},
			getStatisticsDimensionList() {
				getStatisticsDimensionList().then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.dimensionList = data.body
					}
				})
            },
			getScenicList() {
				getScenicList().then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.scenicList = data.body
					}
				})
            },
            getProductList() {
	            getProductList().then(res => {
		            let data = res.data
		            this.listLoading = false
		            if (data.errorCode === 'E_000') {
			            this.productList = data.body
		            }
	            })
            },
			onSearch() {
				this.fetchData()
			},
			handleChangePage(val) {
				this.currentPage = val
				this.fetchData()
			}
		}
	}
</script>
<style lang="scss">
    .statistic-list{
        .el-dialog__body{
            padding-top: 10px;
        }
        .el-table__header-wrapper{
            overflow: visible;
        }
        .verify-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
        .el-table{
            overflow: visible !important;
        }
        .el-table .el-table__body-wrapper {
            overflow: visible;
        }
        .el-table .cell {
            padding: 0 4px;
            overflow: visible;
        }
        tbody tr:first-child{
            background-color: #e7f3ff;
        }
    }
</style>
